<template>
	<div class="container">
		<el-page-header style="margin-right: 1200px;" @back="goBack">
		</el-page-header>
		<div class="baseInfo">
			<div id="touxiang">
				<el-badge value="vip" class="badge" type="warning">
					<el-avatar :size='80' :src='require("@/assets/touxiang/"+this.form.imageUrl)'></el-avatar>
				</el-badge>
			</div>
			<div id="name">
				<span style="margin-top: 24px;">欢迎登录</span>
				<span>账号：123</span>
				<span>信息完整度：</span>
				<el-progress :percentage="50" color="#ffaa00"></el-progress>
			</div>
			<div id="otherInfo">
				<el-descriptions style="margin-top: 10px;" title="基本信息">
					<el-descriptions-item label="用户名">{{this.form.name}}</el-descriptions-item>
					<el-descriptions-item label="手机号">{{this.form.phonenumber}}</el-descriptions-item>
					<el-descriptions-item label="出生日期">{{this.form.date.substring(0,10)}}</el-descriptions-item>
					<el-descriptions-item label="性别">{{this.form.sex}}</el-descriptions-item>
					<el-descriptions-item label="地址">{{this.form.address}}</el-descriptions-item>
				</el-descriptions>
			</div>
		</div>
		<!-- 		<div class="bread-nav">
			<el-breadcrumb style="height: 30px;line-height: 30px;margin-right: 730px;" separator-class="el-icon-arrow-right">
				<el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
				<el-breadcrumb-item>活动管理</el-breadcrumb-item>
				<el-breadcrumb-item>活动列表</el-breadcrumb-item>
				<el-breadcrumb-item>活动详情</el-breadcrumb-item>
			</el-breadcrumb>
		</div> -->
		<div class="allInfo">

			<div class="navigation">
				<el-menu id="div-nav" default-active="1" class="el-menu-vertical-demo"
					>
					<el-menu-item index="1" @click="toPersonInfo">
						<span slot="title">个人资料</span>
					</el-menu-item>
					<el-menu-item index="2" @click="toCart">
						<span slot="title">购物车</span>
					</el-menu-item>
					<el-menu-item index="3" @click="toHistoricalOrders">
						<span slot="title">历史订单</span>
					</el-menu-item>
					<el-menu-item index="4" @click="toCustomerService">
						<span slot="title">联系我们</span>
					</el-menu-item>
					<el-menu-item index="5" @click="toPasswordSetting">
						<span slot="title">密码设置</span>
					</el-menu-item>
					<el-menu-item index="6" @click="exit">

						<span slot="title">退出登录</span>
					</el-menu-item>
				</el-menu>
			</div>
			<div class="show-info">
				<router-view v-if="isShow"></router-view>
			</div>
		</div>

	</div>


</template>

<script>
	import request from '../../utils/axios/request'
	export default {
		data() {
			return {
				isShow: true,
				userId: '123',
				form: {
					imageUrl: 'default.jpeg',
					name: '',
					sex: '',
					phonenumber: '',
					date: '',
					address: ''
				}
			}
		},
		created() {
			request({
				method: 'get',
				url: '/userInfo/' + this.userId,
			}).then((res) => {
				// console.log(res)
				if (res.data.code == 100) {
					if (res.data.data.imageUrl == '') {
						// this.form.imageUrl = 'touxiang.jpeg',
							this.form.name = res.data.data.userName,
							this.form.sex = res.data.data.userSex,
							this.form.phonenumber = res.data.data.userPhone,
							this.form.date = res.data.data.userBirthdate,
							this.form.address = res.data.data.userLocation
					} else {
						this.form.imageUrl = res.data.data.imageUrl,
							this.form.name = res.data.data.userName,
							this.form.sex = res.data.data.userSex,
							this.form.phonenumber = res.data.data.userPhone,
							this.form.date = res.data.data.userBirthdate,
							this.form.address = res.data.data.userLocation
					}
				}
			})
		},
		methods: {

			goBack() {
				this.$router.push('/index')
				// this.reload()
			},
			toPersonInfo() {
				this.$router.push('personInfo')
				// this.reload()
			},
			toCart() {
				this.$router.push('cart')
				// this.reload()
			},
			toHistoricalOrders() {
				this.$router.push('userHistoricalOrders')
				// this.reload()
			},
			toCustomerService() {
				this.$router.push('customerService')
				// this.reload()
			},
			toPasswordSetting() {
				this.$router.push('passwordSetting')
				// this.reload()
			},
			exit() {
				this.$router.push('')
			},
		}
	}
</script>

<style>
	.bread-nav {
		height: 30px;
	}

	#div-nav {
		background-color: #ffffff;
	}

	.navigation {
		all: initial;
		margin: 10px 20px 20px 180px;
		background-color: #f4f4f4;
	}

	.show-info {
		width: 100%;
		height: 800px !important;
		margin-right: 150px;
		margin-top: 10px;
		height: auto;
		background-color: #ffffff;
	}

	.allInfo {
		width: 100%;
		height: 800px;
		display: flex;
		flex-direction: row;
		background-color: #f4f4f4;
	}

	.el-descriptions-row {
		font-size: 16px;
		color: #111111;
	}

	.el-descriptions__body {
		background-color: transparent !important;
	}

	#otherInfo {
		all: initial;
		width: 800px;
		height: 150px;
		background-color: transparent;
	}

	#name span {
		font-size: 16px;
		color: #111111;
		height: 20px;
		display: flex;
		justify-content: flex-start;
		align-items: center;
		margin-bottom: 10px;
	}

	#name {

		width: 200px;
		height: 150px;
		display: flex;
		flex-direction: column;
	}

	.el-badge {
		width: auto;
		height: 80px;
		margin-bottom: 30px;
	}

	#touxiang {
		width: 150px;
		height: 150px;
		margin-left: 200px;
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
	}

	.baseInfo {
		width: 100%;
		height: 150px;
		display: flex;
		float: left;
		flex-direction: row;
		align-items: center;
		background-image: url("../../assets/images/userBG.jpg");
		background-size: 100% 100%;
	}


	.el-avatar img {
		width: 100%;
	}

	.container {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}
</style>